<template>
	<view class="tabs">
		<view style="height: 100rpx;background-color: #FFFFFF;" class="page-section-spacing">
			<view class="scroll-view-item_H" v-for="(item,index) in tabList" @tap="changeTab(index)">
				<view class="animate__animated" hover-class="animate__rubberBand"
					:class="index == isActive ? 'active' :''">
					{{item.name}}
				</view>
				<view class="" :class="index == isActive ? 'line' :''"></view>
			</view>
		</view>
		<!-- 班级通知 -->
		<view class="page-section-spacing" v-if="this.isActive===0&&this.classMessage.length>0">
			<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
				@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF" @scrolltolower='nextPage()' lower-threshold="500" class=""
				scroll-y :style="{height: orderHeight+'px'}">
				<view class="">
					<view class="card box-c animated fadeIn" hover-class="tada" v-for="(item,index) in classMessage" :key="index" @tap="jumpList(item.id)">
						<view >
							<view class="head box d-ai-c d-jc-sb">
								<view class="mg_title">
									<text>{{item.title}}</text>
								</view>
								<view class="">
									<text class="readMessage">{{item.readTotal}}人已读</text>
								</view>
							
							</view>
							<view class="content">
								<view >
									通知内容：
								</view>
								<view class="">
									{{item.content}}
								</view>
							</view>
							<view class="msgcontent">
								<view class="" style="width: 48rpx;">
									<image class="mg_image" :src="item.toUserImage" />
								</view>
								<view class="mg_b">
									<text>{{item.toUserName}}{{item.role===1?'(教务)':'(老师)'}}</text>
									<text>{{item.createTime}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 学员签到 -->
		<view class="page-section-spacing" v-if="this.isActive===1">
			<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
				@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF" lower-threshold="500" class=""
				scroll-y :style="{height: orderHeight+'px'}">
				<view class="">
					<view class="card1 animated fadeIn" hover-class="tada" v-for="(v,i) in classSign" :key="i">
						<view class="">
							<image class="image1" :src="v.image" />
						</view>
						<view class="" style="width: 570rpx;">
							<text style="font-size: 28rpx;color: #333333;">{{v.nickName}}</text>
							<text v-if="v.signTime == '1'" style="font-size: 28rpx;color: #333333;">未签到</text>
							<text v-if="v.signTime == '2'" style="font-size: 28rpx;color: #333333;">未开始</text>
							<text v-if="v.signTime !== '1' && v.signTime !== '2'"
								style="font-size: 28rpx;color: #FF5551;">已签到({{v.signTime}})</text>
						</view>

					</view>


				</view>

			</scroll-view>
		</view>

		<!-- 报名记录 -->
		<view class="page-section-spacing" v-if="this.isActive===2">
			<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
				@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF" lower-threshold="500" class=""
				scroll-y :style="{height: orderHeight+'px'}">
				<view class="" v-for="(v,i) in studentlist">
					<view class="card1 animated fadeIn" hover-class="tada">
						<view class="">
							<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="v.image" />
						</view>
						<view class="" style="width: 570rpx;height: 100%;">
							<view class="" style="height: 100rpx;margin-top: 10rpx;">
								<view class="" style="font-size: 28rpx;">
									{{v.nickName}}
								</view>
								<view class="" style="font-size: 22rpx;">
									{{v.phone}}
								</view>
							</view>
							<text style="font-size: 28rpx;color: #333333;">{{v.createTime}}</text>
						</view>

					</view>

				</view>

			</scroll-view>
		</view>
		<wybpopup  ref="popup1" type="bottom">
		    <view class="pop_t">
		    	<view class="poptext" style="font-size: 26rpx;color: #999999;text-align: center;">
		    		{{activityInfo.className}}全部学员将会收到您的通知
		    	</view>
				<view class="popbox">
					<view class="">
						<text style="font-size: 30rpx;">
							标题：
						</text>
					</view>
					<view class="">
						<textarea v-model="titlecontent"  class="textarea1 m-1" placeholder="请输入标题内容(内容长度不超过30个字符)" :maxlength="30" auto-height />
						
					</view>
				</view>
		    	<view class="popbox">
		    		<view class="" style="font-size: 30rpx;">
		    			<text>
		    				内容：
		    			</text>
		    		</view>
		    		<view class="">
		    			<textarea v-model="detailcontent"  class="textarea m-1" placeholder="请输入详细通知内容(内容长度不超过200个字符)" :maxlength="200" auto-height />
		    			
		    		</view>
		    	</view>
				<view class="btn" @tap="send">
					确定发送
				</view>
		    </view>
		</wybpopup>
	</view>
</template>

<script>
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		components:{
			wybpopup
		},
		data() {
			return {
					titlecontent: '',
					detailcontent: '',			
				orderHeight: 500,
				isActive: 0,
				tabList: [{
						id: "1",
						name: '班级通知'
					}, {
						id: "2",
						name: '学员签到'
					},
					{
						id: "3",
						name: '报名记录'
					},
				],
				isNull: false,
				hasNextPage: true,
				refresherThreshold: 50,
				refresherTriggered: false,
				_refresherTriggered: false,
				pageNum: 1,
				pageSize: 10,
				shopId: '',
				classOrActivityId: '',
				studentlist: '',
				classSign: '',
				activityInfo: '',
				classMessage:''
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(150) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.id = option.id
			this.classOrActivityId = option.classOrActivityId
			console.log(option.shopId)
			console.log(option.classOrActivityId)
			this.changeTab(0)
			this.getclassStudents()
			this.getActivityInfo()
			this.getClassMessage()

		},

		methods: {
			jumpList(id){
				uni.navigateTo({
					url:'../teacher/msgInfo?id='+id
				})
			},
			async make(pupOrderNo) {
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: pupOrderNo,
					size: 250,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})
			},
			onNavigationBarButtonTap(e) {
				this.titlecontent= ''
				this.detailcontent= ''	
				if (e.index == 0) {
					 this.$refs.popup1.show();
				}
			},
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				// _this.getClassOrdersList(_this.payState)
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1500)
			
			},
			nextPage() {
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					console.log(this.pageNum)
					this.$api.getClassMessage({
						toClassId: this.id,
						toShopId:this.shopId
					},this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							console.log(res.data)
							// this.MessageToList = res.data.dataMap
							var arr = res.data.dataMap.list
							// for (var i = 0; i < arr.length/2; i++) {
							// var temp = arr[i]; //交换变量
							// arr[i] = arr[arr.length - i - 1];
							// arr[arr.length-i-1]=temp;
							// }
							// console.log(arr)
							// this.MessageToList = arr
							for (var i = 0; i < arr.length; i++) {
								this.classMessage.push(arr[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
						}
					})
				}
				
			
			},
			// 时间转化
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
			getclassStudents() {
				this.$api.classStudents({
					classOrActivityId: this.classOrActivityId,
					shopId: this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap.list)
						this.studentlist = res.data.dataMap.list
						for (var i = 0; i < this.studentlist.length; i++) {
							this.studentlist[i].createTime = this.renderTime(res.data.dataMap.list[i].createTime)
						}
						this.isNull = this.studentlist.length < 1 ? true : false

					}
				})
			},
			getClassSign() { //获取学员签到
				this.$api.getClassSign({
					classOrActivityId: this.classOrActivityId,
					shopId: this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.classSign = res.data.dataMap

					}
				})
			},
			//点击事件改变swiper
			changeTab(active) {
				this.isActive = active
				if (active == 0) {
					this.payState = ''
					console.log(this.isActive)
					this.getClassMessage()
				} else if (active == 1) {
					this.studentlist = ''
					this.getClassSign()
					// this.getclassStudents()
				} else if (active == 2) {
					this.payState = 0
					this.getclassStudents()
				}


			},
			getActivityInfo() {
				this.$api.getClassOrActivityInfo({
					id: this.id
				}).then((res) => {
					this.activityInfo = res.data.dataMap
					console.log(this.activityInfo)
					uni.setNavigationBarTitle({
						title: this.activityInfo.className
					})
					
				})
			},
			//班级通知列表
			getClassMessage() {
				this.pageNum = 1
				this.$api.getClassMessage({
					toClassId: this.id,
					toShopId:this.shopId
				},this.pageNum, this.pageSize).then((res) => {
					// this.classMessage = res.data.dataMap
					console.log(res.data.dataMap)
					var arr = res.data.dataMap.list
					// for (var i = 0; i < arr.length/2; i++) {
					// var temp = arr[i]; //交换变量
					// arr[i] = arr[arr.length - i - 1];
					// arr[arr.length-i-1]=temp;
					// }
					// console.log(arr)
					this.classMessage = arr
					this.hasNextPage = res.data.dataMap.hasNextPage
				})
			},
			//发送通知
			send(){
				if(this.titlecontent===''||this.detailcontent===''){
					uni.showToast({
						title: '请填写完整信息！',
						duration: 1500,
						icon: "none",
						
					});
					return
				}else{
					this.$api.sendMessage({
						toShopId: this.activityInfo.shopId,
						toClassifyId: this.activityInfo.classifyGoodsId,
						toClassId: this.activityInfo.id,
						title: this.titlecontent,
						content: this.detailcontent,
						role:2
					}).then((res) => {
						console.log(1111)
						if (res.data.code == 200) {		
							uni.showToast({
								title: '发送成功！',
								duration: 1500,
								icon: "none",
								
							});
							this.$refs.popup1.hide();
							setTimeout(()=> {
							          this.getClassMessage()
							     }, 1000);
						}
						
					})
				}
			}
		}
	}
</script>

<style scoped>
	.pop_t{
		/* border:1px solid red; */
		padding-bottom: 50rpx;
	}
	/* .classlist{
		margin-bottom: 20rpx;
	} */
	.mg_title{
		width: 400rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.mg_b{
		width: 590rpx;
	}
	.mg_b>text{
		font-size: 24rpx;
		color: #333333;
	}
	.mg_image{
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}
	.readMessage{
		color:#FF5551;font-size:22rpx;
	}
	.content{
		display: flex;
	}
	.content>view:nth-child(1){
		width: 182rpx;
		color: #666666;
		font-size: 30rpx;
	}
	.content>view:nth-child(2){
		width: 606rpx;
		color: #666666;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.image1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.poptext {
		height: 120rpx;
		line-height: 120rpx;
		/* margin-top: 50rpx; */
	}

	.btn {
		width: 85%;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #FF5551;
		margin: 0 auto;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
		margin-top: 60rpx;
	}

	.textarea {
		background-color: #F8F8F8;
		min-height: 240rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		padding: 25rpx 20rpx;
	}

	.textarea1 {
		background-color: #F8F8F8;
		min-height: 100rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		padding: 25rpx 20rpx;
	}

	.popbox {
		width: 85%;
		margin: 0 auto;

	}

	.content {
		display: flex;
	}

	.msgcontent {
		margin-top: 19rpx;
		height: 48rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.msgcontent>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card1>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.head {
		font-size: 30rpx;
		color: #666666;
		height: 60rpx;
		position: relative;
		border: 1rpx solid white;
	}

	.canvas {
		height: 230px;
		width: 230px;
		margin: 5rpx 0;
	}

	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}

	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}

	.order_null image {
		margin: 60rpx auto;
		width: 250rpx;
		height: 250rpx;
	}

	.djc-s-a {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.list-1 {
		padding: 0 0 0 20rpx;
	}

	.list-1 view:nth-child(1) {
		font-weight: 600;
		margin-top: -7rpx;
	}

	.list-1 view:nth-child(2) {
		font-size: 24rpx;
		margin-top: 53rpx;
		color: #9e9e9e;
	}

	.info {
		width: 680rpx;
		margin: 0 auto;
		padding-top: 15rpx;

	}

	.aj {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card {
		display: flex;
		width: 650rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 0rpx 30rpx;
		padding-bottom: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.card1 {
		display: flex;
		height: 120rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 0rpx 40rpx;
		justify-content: space-between;
		position: relative;
		margin-bottom: 2rpx;

	}

	.swiper {
		width: 100%;
	}

	.page-section-spacing {
		background-color: #f3f3f3;
		padding-top: 10rpx;
		display: flex;
		justify-content: space-around;
	}

	.line {
		height: 8rpx;
		background-color: #FF5551;
		width: 50%;
		margin: auto;
		border-radius: 50rpx;
		margin-top: 5rpx;
	}

	.line-gray {
		height: 1rpx;
		width: 660rpx;
		background-color: #f0f0f0;
		margin: auto;
		border-radius: 24rpx;
		z-index: 99;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 90%;

	}

	.scroll-view-item_H>view {
		font-size: 33rpx;
		/* border: 1px solid red; */
		line-height: 80rpx;

	}

	.scroll-view-item_H {
		display: inline-block;
		width: 150rpx;
		height: 75rpx;

		text-align: center;
		font-size: 34rpx;
		/* border: 1px solid red; */
		/* margin-left: 28rpx; */
	}

	,
	.tab-bar {
		/* #ifdef APP-PLUS */
		width: 750rpx;
		/* #endif */
		height: 42px;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	,
	.tabs {
		flex: 1;
		flex-direction: column;
		background-color: #ffffff;
	}

	.active {
		color: #a7a7a7;
	}

	.title {
		padding: 10rpx;
		font-size: 28rpx;
		width: 150rpx;
		text-align: center;

	}

	.box {
		flex-direction: row;
		display: flex;
		margin-top: 10rpx;
	}

	.box-c {
		flex-direction: column;
		display: flex;
	}
</style>
